<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multiple Line Charts</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <style>
        .chart-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        .chart {
            width: 48%;
            height: 400px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="chart-container">
        <div id="chart1" class="chart"></div>
        <div id="chart2" class="chart"></div>
        <div id="chart3" class="chart"></div>
        <div id="chart4" class="chart"></div>
    </div>

    <script>
        var data = {
            labels: [
                ['0.17400000', '0.26700000', '0.23000000', '0.22300000', '0.22500000'],
                ['0.71300000', '0.73000000', '0.75600000', '0.76700000', '0.58600000'],
                ['1.32600000', '1.45900000', '1.39200000', '0.65300000', '1.46100000'],
                ['1.16600000', '1.82200000', '1.84000000', '1.88000000', '1.93900000']
            ],
            data: [
                [
                    [3.1, 3.2, 3.1, 3.0, 3.1], // 外向性 for chart 1
                    [2.8, 2.7, 2.8, 2.9, 2.8], // 神经质 for chart 1
                    [3.3, 3.4, 3.3, 3.2, 3.3], // 宜人性 for chart 1
                    [2.5, 2.6, 2.5, 2.4, 2.5]  // some other data for chart 1
                ],
                [
                    [3.0, 3.1, 3.0, 2.9, 3.0], // 外向性 for chart 2
                    [2.9, 2.8, 2.9, 3.0, 2.9], // 神经质 for chart 2
                    [3.4, 3.5, 3.4, 3.3, 3.4], // 宜人性 for chart 2
                    [2.6, 2.7, 2.6, 2.5, 2.6]  // some other data for chart 2
                ],
                [
                    [2.9, 3.0, 2.9, 2.8, 2.9], // 外向性 for chart 3
                    [2.7, 2.6, 2.7, 2.8, 2.7], // 神经质 for chart 3
                    [3.2, 3.3, 3.2, 3.1, 3.2], // 宜人性 for chart 3
                    [2.4, 2.5, 2.4, 2.3, 2.4]  // some other data for chart 3
                ],
                [
                    [3.2, 3.3, 3.2, 3.1, 3.2], // 外向性 for chart 4
                    [2.6, 2.5, 2.6, 2.7, 2.6], // 神经质 for chart 4
                    [3.5, 3.6, 3.5, 3.4, 3.5], // 宜人性 for chart 4
                    [2.7, 2.8, 2.7, 2.6, 2.7]  // some other data for chart 4
                ]
            ]
        };

        var chartTitles = [
            '互助指数对人格的影响',
            '自由度对人格的影响',
            '社会支持度对人格的影响',
            'GDP对人格的影响'
        ];

        var charts = ['chart1', 'chart2', 'chart3', 'chart4'];

        charts.forEach(function (chartId, index) {
            var chart = echarts.init(document.getElementById(chartId));

            var option = {
                title: {
                    text: chartTitles[index],
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['外向性', '神经质', '宜人性', '其他'],
                    top: 30
                },
                xAxis: {
                    type: 'category',
                    data: data.labels[index]
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '外向性',
                        type: 'line',
                        data: data.data[index][0]
                    },
                    {
                        name: '神经质',
                        type: 'line',
                        data: data.data[index][1]
                    },
                    {
                        name: '宜人性',
                        type: 'line',
                        data: data.data[index][2]
                    },
                    {
                        name: '其他',
                        type: 'line',
                        data: data.data[index][3]
                    }
                ]
            };

            chart.setOption(option);
        });
    </script>
</body>
</html>
